<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
			<el-form-item label="单位名称" prop="randomUnitName">
			  <el-input
			    v-model="queryParams.randomUnitName"
			    placeholder="请输入单位名称"
			    clearable
			    size="small"
			    @keyup.enter.native="handleQuery"
			  />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="extractList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="序号" type="index" width="60" align="center" />
			<el-table-column label="申请单位" align="left" prop="createBy" show-overflow-tooltip/>
			<el-table-column label="单位库" align="left" prop="randomUnitTypeName" show-overflow-tooltip/>
			<el-table-column label="单位名称" align="left" prop="randomUnitName" show-overflow-tooltip/>
			<el-table-column label="处罚时间(月)" align="left" prop="randomMonth" width="150"/>
			<el-table-column label="审批状态" align="center" prop="randomBan" :formatter="approveStatusFormat" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" v-if="scope.row.randomBan==6" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['unit:extract:edit']">审批</el-button>
					<el-button size="mini" v-if="scope.row.randomBan==7 ||scope.row.randomBan==9" type="text" icon="el-icon-edit" @click="handleUpdatedetails(scope.row)" v-hasPermi="['unit:extract:edit']">查看</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改项目申请对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body :close-on-click-modal="false" @close="cancelImg">
			<el-form ref="form" :model="form" label-width="120px" >
				<div class="topbox">
					<el-row :gutter="15" style="margin-top:-30px;margin-bottom:-30px;padding-bottom: -30px;">
						<el-col :span="12">
							<el-form-item label="申请单位:" prop="createBy">{{ form.createBy }}</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="单位名称:" prop="randomUnitName">{{ form.randomUnitName }}</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="15" style="margin-top:-30px;margin-bottom:-30px;padding-bottom: -30px;">
						<el-col :span="12">
							<el-form-item label="处罚时间(月):" prop="randomMonth">{{ form.randomMonth }}</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="处罚理由:" prop="randomBanRansom">{{ form.randomBanRansom }}</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="15">
							<el-form-item label="附件:">
						        <el-image
								style="width: 100px; height: 100px"
								:src="form.randomUrl"
								:preview-src-list="imgUrl"
								:z-index="3000"
								 v-if="this.form.randomUrl !=null && this.form.randomUrl !=undefined && this.form.randomUrl !=''"
								>
								</el-image>							
							</el-form-item>
					</el-row>
					<el-row :gutter="15">
					<el-form-item label="抽取库:" prop="randomUnittypeId">
						<el-select v-model="form.randomUnittypeId" placeholder="请选择抽取库" clearable size="small" style="width:100%;" @change="UnitTypeChange" disabled="disabled">
							<el-option v-for="type in unitTypeOptions" :key="type.unittypeId" :label="type.unittypeName" :value="type.unittypeId" />
						</el-select>
					</el-form-item>
					</el-row>
				</div>
				<el-form-item label="审批结果">
						<el-radio v-model="radio" label="0">同意</el-radio>
						<el-radio v-model="radio" label="1">拒绝</el-radio>
				</el-form-item>
				<el-form-item label="审批意见">
					<el-input v-model="form.extractApproveIdea" type="textarea" placeholder="请输入内容" />
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 添加或修改项目申请对话框 -->
		<el-dialog :title="title" :visible.sync="open2" width="1200px" append-to-body :close-on-click-modal="false">
			<el-form ref="form" :model="form" label-width="120px" >
				<div class="topbox">
					<el-row :gutter="15" style="margin-top:-30px;margin-bottom:-30px;padding-bottom: -30px;">
						<el-col :span="12">
							<el-form-item label="申请单位:" prop="createBy">{{ form.createBy }}</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="单位名称:" prop="randomUnitName">{{ form.randomUnitName }}</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="15" style="margin-top:-30px;margin-bottom:-30px;padding-bottom: -30px;">
						<el-col :span="12">
							<el-form-item label="处罚时间(月):" prop="randomMonth">{{ form.randomMonth }}</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="处罚理由:" prop="randomBanRansom">{{ form.randomBanRansom }}</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="15">
							<el-form-item label="附件:">
						        <el-image
								style="width: 100px; height: 100px"
								:src="form.randomUrl"
								:preview-src-list="imgUrl"
								:z-index="3000"
								 v-if="this.form.randomUrl !=null && this.form.randomUrl !=undefined && this.form.randomUrl !=''"
								>
								</el-image>							
							</el-form-item>
					</el-row>
					<el-form-item label="抽取库:" prop="randomUnittypeId">
						<el-select v-model="form.randomUnittypeId" placeholder="请选择抽取库" clearable size="small" style="width:100%;" @change="UnitTypeChange" disabled="disabled">
							<el-option v-for="type in unitTypeOptions" :key="type.unittypeId" :label="type.unittypeName" :value="type.unittypeId" />
						</el-select>
					</el-form-item>
				</div>
					<el-form-item label="审批意见:" prop="randomBanRansom">{{ form.randomBanRansom }}</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm2">确 定</el-button>
				<el-button @click="cancel2">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listExtract, getExtract, delExtract, addExtract, updateExtract, exportExtract,Department } from '@/api/unit/extract';
import FileUpload from '@/components/FileUpload';
import { listUser } from '@/api/system/user';
import { listUnit, randomlist, getUnit, delUnit, addUnit, updateUnit, exportUnit } from '@/api/unit/unit';
import { listUnittype, getUnittype } from '@/api/unit/unittype';
import { getRandomMsg, listRandom, DeleteMapping,getPunish,getRandom } from '@/api/unit/random';

export default {
	name: 'ExtractApprove',
	components: {
		FileUpload
	},
	data() {
		return {
			//默认同意
			radio:'0',
			// 上传文件的图片地址
			imgUrl:[],
			//打开预览
			innerVisible:false,
			// 遮罩层
			loading: true,
			//默认选中
			extractResident: '0',
			// 选中数组
			ids: [],
			//抽取人单位字典
			unitTypeponsonOptions: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 项目申请表格数据
			extractList: [],
			// 单位信息表格数据
			unitList: [],
			// 单位类型字典
			unitTypeOptions: [],
			// 弹出层标题
			title: '',
			title1: '你的排除理由如下:',
			titlePrint: '',
			// 是否显示弹出层
			open: false,
			open2: false,
			openPrint: false,
			unitopen: false,
			exclude: false,
			outframe: false,
			unitId: '',
			unittype: '',
			randomUnitName: '',
			Random: {
				randomUnittypeId: null,
				randomBanRansom: null,
				randomUnitId: null,
				randomUnitName: null
			},
			// 排除项目集合
			RandomList: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				extractItem: null,
				extractUser: null,
				extractAddress: null,
				extractPrice: null,
				extractApproveStatus: null,
				maxPrice: null,
				randomUnittypeId: null,
				extractId: null,
				randomUnitId: null,
			},
			UnitqueryParams: {
				pageNum: 1,
				pageSize: 10,
				unitName: null,
				extractId: null,
				unitNaturalGrade: null,
				unitNaturalScope: null,
				unitType: null
			},
			// 表单参数
			form: {
			},
			//单位详情
			  formUnit: {

			  },
		};
	},
	created() {
		this.getList();
		listUnittype(this.unitTypeParams).then(response => {
		    this.unitTypeOptions = response.rows
		  })
			this.queryParams.randomBan = '6,7,8,9';
			listRandom(this.queryParams).then(response => {
			 this.extractList = response.rows;
		     this.unitTypeponsonOptions = response.rows;
			 this.total = response.total;
		    });
	},
	methods: {
		//单位详情表单重置
		resetUnit() {
			this.formUnit = {
				unitId:null,
				unitSort:null,
				unitType:null,
				unitName:null,
				unitNaturalGrade:null,
				unitNaturalScope:null,
				unitAddress:null,
				unitRemarks:null
			}
		},
		//抽取人单位
		UnitTypeChangepenson(value) {
			listUser().then(response => {
				for(var o=0;o<response.rows.length;o++){
					if(value == response.rows[o].userId){
						this.queryParams.createBy = response.rows[o].nickName;
					}
				}
			});
		},
		/** 查询项目申请列表 */
		async getList(val) {
			this.loading = true;
			 await Department(this.queryParams).then(response =>{
					this.queryParams.userId = response.data.userId;
					this.loading = false;
			});
			this.queryParams.randomBan = "6,7,8,9";
			await listRandom(this.queryParams).then(response => {
			 this.extractList = response.rows;
			 this.unitTypeponsonOptions = response.rows;
			 this.total = response.total;
			});
		},
		//单位详情提交按钮
		submitFormUnit() {
			this.unitopen = false;
			this.resetUnit();
		},
		//单位详情
		unitShow(row) {
		  const unitId = row.unitId || this.ids
		  getUnit(unitId).then(response => {
		    this.formUnit = response.data;
		    this.unitopen = true;
		    this.title = "单位详情";
		  });
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.RandomList = [];
			this.reset();
		},
		// 取消按钮
		cancel2() {
			this.open2 = false;
			this.reset();
		},
		//单位详情取消按钮
		cancelUnit() {
		  this.unitopen = false;
		  this.resetUnit();
		},
		//翻译单位状态
		approveStatusFormat(row, column) {
			if(row.randomBan=="6"){
			  return "申请中";
			}else if(row.randomBan=="7"){
			  return "处罚中";
			}else if(row.randomBan=="9"){
			  return "审批拒绝";
			}
		},
		// 表单重置
		reset() {
			this.form = {
				extractId: null,
				extractApproveStatus: null,
				createBy: null,
				extractPriceUrl: null,
				randomUrl: null,
				unitTypeName:null,
				unitName:null,
				randomBanRansom:null,
				randomUnitId:null,
				randomMonth: null,
				randomUnittypeId: null,
			};
			this.resetForm('form');
		},
		//单位选择select改变方法
		UnitTypeChange(value) {
			//让table显现出来
			//查询table数据
			this.UnitqueryParams.unitType = value;
			this.UnitqueryParams.extractId = this.form.extractId;
			//console.log('extractId' + this.UnitqueryParams.extractId);
			randomlist(this.UnitqueryParams).then(response => {
				this.unitList = response.rows;
				this.loading = false;
			});
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.reset();
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.extractId);
			this.names = selection.map(item => item.randomId)
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加项目申请';
		},
		/** 审批按钮操作 */
		async handleUpdate(row) {
			const randomId = row.randomId || this.names;
			await getRandom(randomId).then(response => {
				this.form = response.data;
				if(response.data.randomUrl){
				  this.imgUrl = response.data.randomUrl.split(',')
				}
				this.open = true;
				this.title = "审批处罚申请";
			});
		},
		//查看详情按钮
		async handleUpdatedetails(row){
			const randomId = row.randomId || this.names;
			await getRandom(randomId).then(response => {
				this.form = response.data;
				if(response.data.randomUrl){
				  this.imgUrl = response.data.randomUrl.split(',')
				}
				this.open2 = true;
				this.title = "审批处罚查看";
			});
		},
		cancelImg(){
			this.imgUrl=[];
		},
		overcome(row) {
			this.unitId = row.unitId || this.ids;
			this.unittype = row.unitType || this.ids;
			this.unitName = row.unitName || this.ids;
			this.exclude = true;
			this.title = '排除单位';
		},
		/** 提交按钮 */
		submitForm() {
				if (this.radio == '0') {
					this.form.randomBan = "8";
				} else if (this.radio == '1') {
					this.form.randomBan = "9";
				}
				getPunish(this.form).then(response => {
					this.msgSuccess('审批完成');
					this.open = false;
					this.getList();
				});
		},
		submitForm2() {
					this.open2 = false;
					this.reset();
		},

		call() {
			this._data.exclude = false;
		},
		reason(row) {
			this.outframe = true;
			this.Random.randomUnitName = this.unitName;
			this.Random.randomUnittypeId = this.unittype;
			this.Random.randomUnitId = this.unitId;
		},
		determined() {
			this._data.outframe = false;
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const extractIds = row.extractId || this.ids;
			this.$confirm('是否确认删除项目申请编号为"' + extractIds + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(function() {
					return delExtract(extractIds);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
	}
};
</script>
<style type="text/css" scoped>
::v-deep .el-table .denger-row {
	background: #FFE4E1;
}
.topbox {
	width: 100%;
}
.btobox {
	width: 100%;
}
.form-img-out{
	width: 130px;
	height: 130px;
}
.form-img-line{
	width: 500px;
	height: 500px;
}
.form-dialog{
	text-align: center;
}
.unitSort-box li{
	margin-top: 5px;
}
</style>
